<template>

  <el-dialog v-model="AccountDialog" :show-close="false" top="2.3%" class="AccountDialog" width="700px" align-center>
    <header>
      <span @click="AccountDialog = false"><el-icon size="18">
          <Back />
        </el-icon></span>
      <div>{{ $t("language.Account.name") }}</div>
      <strong></strong>
    </header>
    <main class="main">
      <ul class="head">
        <li>
          <NuxtImg src="/img/mylrft.png" alt="" />
          <strong>BRL</strong>
        </li>
        <li></li>
      </ul>

      <template v-if="bang">
        <div class="banginfo">
          <h4>{{ $t("language.Account.bangtitle") }} </h4>
          <div><strong>{{ $t('language.Account.paytype') }}</strong><span>{{ banginfo.type == 0 ? 'CPF' : '' }}</span>
          </div>
          <div><strong>{{ $t('language.Account.realname') }}</strong><span>{{ banginfo.name }}</span></div>
          <div><strong>{{ $t('language.Account.email') }}</strong><span>{{ banginfo.email }}</span></div>
          <div><strong>{{ $t('language.Account.phone') }}</strong><span>{{ banginfo.mobile }}</span></div>
          <div><strong>{{ $t('language.Account.cpf') }}</strong><span>{{ banginfo.cpf }}</span></div>
          <!-- <div><strong>{{ $t('language.Account.cnpj') }}</strong><span></span></div> -->
        </div>
        <p class="bottomtip">
          {{ $t('language.Account.question') }}
          <a @click.prevent="$openPage('/kefu')">{{ $t('language.Account.context') }}</a>
        </p>
      </template>
      <template v-else>
        <h3>{{ $t("language.Account.title") }}</h3>
        <div class="btncenter">
          <p>{{ $t("language.Account.text") }}</p>
          <dl>
            <dd v-for="(item, index) in btn" :class="activeindex == index ? 'active' : ''" :key="index"
              @click="activeindex = index">
              {{ $t(item) }}
            </dd>
          </dl>
        </div>
        <el-form ref="AccountFormRef" style="width: 100%" :model="Account" :rules="AccountRules" label-width="auto"
          class="form" status-icon label-position="top">
          <el-form-item :label="$t('language.Account.input1')" prop="name">
            <el-input clearable v-model="Account.name" :placeholder="$t('language.Account.input1p')" />
          </el-form-item>
          <el-form-item :label="$t('language.Account.input2')" prop="email">
            <el-input clearable v-model="Account.email" :placeholder="$t('language.Account.input2p')" />
          </el-form-item>
          <el-form-item :label="$t('language.Account.input3')" prop="mobile">
            <el-input clearable v-model="Account.mobile" placeholder="" />
          </el-form-item>
          <el-form-item :label="$t('language.Account.input4')" prop="cpf">
            <el-input clearable v-model="Account.cpf" :placeholder="$t('language.Account.input3p')" />
          </el-form-item>
        </el-form>

        <p>{{ $t("language.Account.describe") }}</p>
        <el-button class="btn" @click="submitAccount" :loading="loading" :disabled="loading">{{
    $t("language.Account.footbtn") }}</el-button>
        <div class="redialog">
          <el-dialog width="90%" v-model="initVisible2" :show-close="false">
            <div id="bigcloser" style="border-bottom: 1px solid #4a4c53; padding-bottom: 15px">
              <strong></strong>
              <h4>
                {{ $t("language.rechangedialog.name") }}
              </h4>
              <span @click="initVisible2 = false">
                <el-icon color="#b5b6c8" size="16">
                  <CloseBold />
                </el-icon>
              </span>
            </div>
            <div class="dialogmain">
              <p class="note">{{ $t("language.rechangedialog.text") }}</p>
              <el-button class="confirm" @click="checkout">{{
    $t("language.rechangedialog.btn")
                }}</el-button>
            </div>
          </el-dialog>
        </div>
      </template>

    </main>
  </el-dialog>
</template>
<script setup lang="ts">
import { reactive, ref, onActivated,shallowRef, watch, computed } from "vue";
import { useI18n } from "vue-i18n";
import { Back } from '@element-plus/icons-vue'
const { t } = useI18n();
let store = useStore()
let userinfo = computed(() => store.$state.userinfo)
let loading = shallowRef<boolean>(false);
let Account = reactive({
  id: userinfo.value.gameID,
  pixType: 0,
  name: "",
  email: "",
  countryCode: 55,
  mobile: userinfo.value.mobile,
  cpf: "",
});
let AccountDialog=shallowRef<boolean>(false)
let openAccountDialog = () => {
  AccountDialog.value = true
}
let AccountRules = reactive({
  name: [
    {
      required: true,
      message: t("language.commontips.empty"),
      trigger: "blur",
    },
  ],
  email: [
    {
      required: true,
      message: t("language.commontips.empty"),
      trigger: "blur",
    },
  ],
  mobile: [
    {
      required: true,
      message: t("language.commontips.empty"),
      trigger: "blur",
    },
    {
      min: 6,
      max: 16,
      message: t("language.loginhome.tips2"),
      trigger: "blur",
    },
  ],
  cpf: [
    {
      required: true,
      message: t("language.commontips.empty"),
      trigger: "blur",
    },
  ],
});
let activeindex = shallowRef<number>(0);
let btn = reactive([
  "language.Account.btn1",
  "language.Account.btn2",
  "language.Account.btn3",
]);
let initVisible2 = shallowRef<boolean>(false);
let checkout = () => {
  initVisible2.value = false;
};

// 用户绑定信息
let banginfo: any = reactive({
  gameID: 0,
  surname: "",
  name: "",
  mobile: null,
  email: null,
  type: 0,
  cpf: "",

})
let bang = computed(() => banginfo.mobile != '' && banginfo.mobile != null && banginfo.mobile != undefined ? true : false)
let loadings = shallowRef<boolean>(false)
// 获取用户绑定信息
let initData = () => {
  loadings.value = false
  useHttpPOST(`/Payment/v1.0/Web/Account/Info`, { id: userinfo.value.gameID }).then(((res: any) => {
    // console.log(data, 'console.log(data);');
    for (let key in res.data.value.data) {
      banginfo[key] = res.data.value.data[key]
    }

  })).finally(() => {
    loadings.value = true
  })

}
//监听窗口是否打开
watch(() => AccountDialog.value, (newval) => {
  if (newval) {
    initData()
  }
})
//提交信息
let AccountFormRef: any = ref(null);
let submitAccount = () => {

  AccountFormRef.value.validate((valid: any) => {
    if (valid) {
      loading.value = true;
      useHttpPOST(`/UserCenter/v1.0/User/Bind`, Account)
        .then((res: any) => {
          switch (res.data.value.data.code) {
            case 0:
              ElMessage({
                message: t("language.commontips.bangtips"),
                type: "success",
                duration: 1000,
                onClose: () => {
                  initData()
                },
              });
              break;
          }
        })
        .finally(() => {
          loading.value = false;
        });
    }
  });
};
defineExpose({
  openAccountDialog
})
</script>
<style lang="scss">
.AccountDialog {
  padding: 0px !important;
  background-color: rgb(50, 53, 62) !important;
  border-radius: 10px !important;

  .is-focus {
    border: 1px solid #0a906c !important;
  }

  .el-input__wrapper {
    &:hover {
      border: 1px solid #0a906c !important;
    }
  }

  .dialogmain {
    .confirm {
      background: #0a906c;
      border: none;
      color: #fff;
      display: block;
      width: 40%;
      height: 40px;
      padding: 0;
      font-size: 14px;
      color: #fff;
      text-align: center;
      border-radius: 5px;
      margin: 10px auto 20px;
    }

    .note {
      font-size: 14px;
      color: red;
      line-height: 23px;
      margin-top: 10px;
      text-align: left;
    }
  }

  .el-dialog__header {
    padding: 0 !important;
  }
}
</style>
<style scoped lang="scss">
:deep(.el-input__inner) {
  color: #fff;
}

header {
  width: 100%;
  @include flex(row, space-between, flex-end);
  background-color: rgb(36, 39, 43);
  padding: 30px 20px 9px;
  color: #fff;
  border-radius: 10px 10px 0 0;

  span {
    display: block;
    height: 30px;
    width: 30px;
    @include flex(row, center, center);
    border: 2px solid #fff;
    border-radius: 16px;
    cursor: pointer;

    img {
      width: 100%;
      height: 100%;
    }
  }

  strong {
    width: 50px;
    text-align: right;
    display: block;
  }

  >div {
    font-size: 19px;
    color: #b5bac8;
  }
}

.main {
  border-radius: 0 0 10px 10px;
  background-color: #1a1a1a;
  padding: 0px 12px 50px;
  width: 100%;
  background-color: rgb(26, 26, 26);

  .head {
    @include flex(row, flex-start, center);

    li:nth-child(1) {
      padding: 10px 0;
      border-bottom: 2px solid #fff;
      @include flex(row, flex-start, center);

      img {
        width: 24px;
        margin-right: 4px;
      }

      strong {
        font-size: 17px;
        color: #fff;
      }
    }

    li:nth-child(2) {
      flex: 1;
    }
  }



  h3 {
    color: #fff;
    font-size: 18px;
    padding: 30px 0 25px;
  }

  .btncenter {
    @include flex(row, flex-start, center);

    p {
      font-size: 16px;
      color: #fff;
      margin-right: 10px;
    }

    dl {
      flex: 1;
      @include flex(row, flex-start, center);

      dd {
        flex: 1;
        background-color: rgb(81, 84, 92);
        cursor: pointer;
        font-size: 15px;
        height: 30px;
        @include flex(row, center, center);
        border: 2px solid transparent;
        color: #fff;
        border-radius: 10px;
      }

      .active {
        border: 2px solid #0a906c;
      }
    }
  }

  .form {
    margin-top: 15px;

    :deep(.el-form-item__label) {
      color: #b5bac8;
      font-size: 16px;
      padding-bottom: 10px;
    }

    :deep(.el-input__wrapper) {
      background-color: rgb(40, 42, 48);
      box-shadow: none;
      height: 40px;
      border: 1px solid #4a4c53;
      border-radius: 10px;
    }
  }

  >p {
    font-size: 14px;
    color: #8d969e;
    line-height: 28px;
    margin-top: 20px;
  }

  >.btn {
    display: block;
    width: 90%;
    height: 40px;
    padding: 0;
    text-align: center;
    background-color: #0a906c;
    border: none;
    margin: 30px auto 0;
    font-size: 18px;
    color: #fff;
    border-radius: 20px;
  }

  .banginfo {
    width: 100%;

    h4 {
      font-size: 18px;
      color: #fff;
      margin: 40px 0 30px 0;
    }

    div {
      height: 40px;
      @include flex(row, flex-start, center);

      strong {
        color: #b5bac8;
        font-size: 16px;
        font-weight: normal;
        display: block;
        width: 155px;
      }

      span {
        color: #fff;
        font-size: 16px;
        flex: 1;
        display: block;
        text-align: left;
      }
    }
  }

  .bottomtip {
    position: fixed;
    left: 0;
    width: 100vw;
    bottom: 0;
    text-align: center;
    line-height: 24px;
    padding: 10px;
    color: #fff;

    a {
      color: #2c69b9;
    }
  }
}
</style>
